<template>
  <div class="tp">
    <Header/>
    <Content>
      <div class="panel">
        <!-- <div class="nav">
          <div
              :class="['use', 'item', state.currentNavNo === o.no ? 'active' : '']"
              v-for="o in state.navMenu"
              :key="o.no"
              @click="onNav(o)"
          >
            <div class="icon">
              <img :src="state.currentNavNo === o.no ? o.icon2 : o.icon1" alt=""/>
            </div>
            <div class="title">{{ o.title }}</div>
          </div>
        </div> -->
        <div class="body">
          <template v-if="!!currentNavItem?.children">
            <div class="card" v-for="a in currentNavItem.children" :key="a.no">
              <div class="head">{{ a.title }}</div>
              <div class="grid">
                <div class="use item" v-for="b in a.children" :key="b.no" @click="onPage(a, b)">
                  <div class="icon">
                    <img :src="b.icon1" alt=""/>
                  </div>
                  <div class="title" v-html="b.title"></div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </Content>
  </div>
</template>

<script setup>
import {reactive, watch,computed} from 'vue';
import {useRouter} from 'vue-router';

import _10_1 from '@/assets/img/10-1.png';
import _10_2 from '@/assets/img/10-2.png';
import _20_1 from '@/assets/img/20-1.png';
import _20_2 from '@/assets/img/20-2.png';
import _30_1 from '@/assets/img/30-1.png';
import _30_2 from '@/assets/img/30-2.png';
import _40_1 from '@/assets/img/40-1.png';
import _40_2 from '@/assets/img/40-2.png';
import _50_1 from '@/assets/img/50-1.png';
import _50_2 from '@/assets/img/50-2.png';
import _60_1 from '@/assets/img/60-1.png';
import _60_2 from '@/assets/img/60-2.png';
import _70_1 from '@/assets/img/70-1.png';
import _70_2 from '@/assets/img/70-2.png';
import _80_1 from '@/assets/img/80-1.png';
import _80_2 from '@/assets/img/80-2.png';
import _90_1 from '@/assets/img/90-1.png';
import _90_2 from '@/assets/img/90-2.png';

import _10_10 from '@/assets/img/10-10.png';
import _10_20 from '@/assets/img/10-20.png';
import _10_30 from '@/assets/img/10-30.png';
import _10_40 from '@/assets/img/10-40.png';
import _50_10 from '@/assets/img/50-10.png';
import _50_20 from '@/assets/img/50-20.png';
import crk_icon from '@/assets/img/crk.png';
import jc_icon from '@/assets/img/jc.png';

import Header from '@/widget/header.vue';
import Content from '@/widget/content.vue';
import { storeToRefs } from 'pinia';
import { useLayoutStore } from '@/layouts/useLayoutStore';

const layout = storeToRefs(useLayoutStore())

const router = useRouter();



const state = reactive({
  currentNavNo: 90,
  // currentNavItem: null,

  navMenu: [
    {no: 10, title: '概况', icon1: _10_1, icon2: _10_2},
    {no: 20, title: '客户', icon1: _20_1, icon2: _20_2, path: '/member/list'},
    {no: 30, title: '预约', icon1: _30_1, icon2: _30_2},
    {no: 40, title: '收银', icon1: _40_1, icon2: _40_2, path: '/cashier/index'},
    {
      no: 50,
      title: '商品',
      icon1: _50_1,
      icon2: _50_2,
      path: '/product/list',
    },

    {
      no: 60,
      title: '库存',
      icon1: _60_1,
      icon2: _60_2,
      path: '/stock/list',
    },
    {
      no: 70,
      title: '报表',
      icon1: _70_1,
      icon2: _70_2,
      children: [
        {
          no: 10,
          title: '库存报表',
          children: [
            {no: 10, title: '出入库明细', icon1: crk_icon, path: '/report/stock-out-in'},
            {no: 20, title: '寄存明细', icon1: jc_icon, path: '/report/stock-deposit'},
          ],
        },

        {
          no: 20,
          title: '订单报表',
          children: [
            {no: 10, title: '订单列表', icon1: _10_20, path: '/report/order-list'},
            {no: 20, title: '欠款列表', icon1: _10_20, path: '/report/debt-list'},
            {no: 30, title: '服务列表', icon1: _10_20, path: '/report/service-list'},
            {no: 40, title: '退单列表', icon1: _10_20, path: '/report/back-list'},
            {no: 50, title: '平台核销', icon1: _10_20, path: '/report/verify-list?type=douyin'},

            /*{no: 50, title: '抖音核销', icon1: _10_20, path: '/report/verify-list?type=douyin'},
            {no: 60, title: '美团核销', icon1: _10_20, path: '/report/verify-list?type=mtdp'},
            {no: 70, title: '支付宝核销', icon1: _10_20, path: '/report/verify-list?type=alipay'},
            {no: 80, title: '口碑核销', icon1: _10_20, path: '/report/verify-list?type=koubei'},
            {no: 90, title: '小程序核销', icon1: _10_20, path: '/report/verify-list?type=wechat'},*/
          ],
        },
      ],
    },
    {no: 80, title: '营销中心', icon1: _80_1, icon2: _80_2},
    {
      no: 90,
      title: '设置',
      icon1: _90_1,
      icon2: _90_2,
      children: [
        {
          no: 10,
          title: '基础资料',
          children: [
            {no: 10, title: '门店资料', icon1: _10_10, path: '/basics/shop'},
            {no: 20, title: '员工资料', icon1: _10_20, path: '/basics/staff'},
            {no: 30, title: '房间设置', icon1: _10_30, path: '/basics/room'},
            {no: 40, title: '排班设置', icon1: _10_40},
          ],
        },

        {
          no: 50,
          title: '商品设置',
          children: [
            {no: 10, title: '商品分类', icon1: _50_10, path: '/basics/category'},
            {no: 20, title: '品牌商品库', icon1: _50_20, path: '/basics/brand'},
          ],
        }
      ],
    },
  ],
});

const currentNavItem = computed(() => {
  return state.navMenu.find(d => `${d.no}` === `${layout.currentRouteNo.value}`) || {}
})

// watch(
//     () => state.currentNavNo,
//     (value) => {
//       onNav(state.navMenu.find((o) => o.no === value) ?? null);
//     },
//     {immediate: true},
// );

function onNav(item) {
  state.currentNavItem = item;

  if (item?.path) {
    router.push(item.path);
  } else {
    state.currentNavNo = item?.no;
  }
}

function onPage(group, item) {
  const {path} = item;

  if (path) {
    router.push(path);
  }
}
</script>

<style lang="less" scoped>
.panel {
  display: flex;
  flex-direction: row;
  height: 100%;

  .nav {
    display: flex;
    flex-direction: column;
    width: 80px;
    height: 100%;
    padding: 36px 0;
    background-color: #fff;
    cursor: pointer;

    .active {
      border-radius: 8px;
      background: linear-gradient(129deg, #f8b1c3 0%, #ef9bb1 100%);

      .title {
        color: #fff !important;
      }
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 0;

      .icon {
        padding: 2px;
      }

      img {
        width: 24px;
        height: 24px;
      }

      .title {
        margin-top: 4px;
        color: #091f3d;
        font-size: 13px;
      }
    }
  }

  .body {
    flex: 1;

    .card {
      margin: 12px 0;
      padding: 24px 32px;

      .head {
        color: #091f3d;
        font-size: 15px;
        font-weight: 600;
      }

      .grid {
        display: flex;
        flex-flow: row wrap;
        margin-top: 16px;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin: 12px 56px 12px 0;
        }
      }

      .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 16px;
        background: linear-gradient(129deg, #f8b1c3 0%, #ef9bb1 100%);

        img {
          width: 28px;
          height: 28px;
        }
      }

      .title {
        margin-top: 6px;
        color: #091f3d;
        font-size: 13px;
        text-align: center;
      }
    }
  }
}
</style>
